import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, DatePicker, Input } from 'antd';
import moment from 'moment';
import { checkCardID } from '@/utils/utils';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;

class BasicInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPattern: true,
    };
  }

  // 选择证件类型
  selectIdType = value => {
    //  选择证件类型时，先清空证件号，性别，出生日期
    const { form } = this.props;
    form.resetFields([
      'requestAddBaseDto.idCode',
      'requestAddBaseDto.gender',
      'requestAddBaseDto.birthDate',
    ]);
    const {
      dispatch,
      addinfo: { requestAddBaseDto, sendBeginDate },
    } = this.props;

    if (value === 1) {
      //  身份证
      this.setState({ isPattern: true });
    } else {
      this.setState({ isPattern: false });
    }
    if (requestAddBaseDto.idCode && sendBeginDate) {
      dispatch({
        type: 'addinfo/fetchEmpLaborCont',
        payload: {
          idType: value,
          idCode: requestAddBaseDto.idCode,
          beginDate: sendBeginDate,
        },
      });
    }
  };

  // 输入证件号码
  getIdCode = e => {
    const {
      dispatch,
      addinfo: { requestAddBaseDto, sendBeginDate },
    } = this.props;
    checkCardID(e.target.value, (sex, date) => {
      dispatch({
        type: 'addinfo/updateModelData',
        payload: {
          requestAddBaseDto: {
            ...requestAddBaseDto,
            gender: sex,
            birthDate: moment(new Date(date).getTime()),
          },
        },
      });
      // 获取劳动信息
      if (requestAddBaseDto.idType && sendBeginDate) {
        dispatch({
          type: 'addinfo/fetchEmpLaborCont',
          payload: {
            idType: requestAddBaseDto.idType,
            idCode: e.target.value,
            beginDate: sendBeginDate,
          },
        });
      }
    });
  };

  // 校验身份证
  isCardID = (rule, sId, callback) => {
    checkCardID(
      sId,
      () => {
        callback();
      },
      callback
    );
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { isPattern } = this.state;
    // 页面布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    return (
      <Row gutter={64}>
        <Col {...colProps}>
          <FormItem label="姓名">
            {getFieldDecorator('requestAddBaseDto.empName', {
              rules: [{ required: true, message: '最多不超过30字符' }],
            })(<Input placeholder="请输入" maxLength={30} />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          <FormItem label="证件类型">
            {getFieldDecorator('requestAddBaseDto.idType', {
              rules: [{ required: true, message: '请选择' }],
            })(<DictCode dictType="ADD_ID_TYPE" onChange={this.selectIdType} />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          {isPattern ? (
            <FormItem label="证件号">
              {getFieldDecorator('requestAddBaseDto.idCode', {
                validateTrigger: 'onChange',
                rules: [
                  {
                    required: true,
                    validator: this.isCardID,
                  },
                ],
              })(<Input placeholder="请输入" onChange={this.getIdCode} />)}
            </FormItem>
          ) : (
            <FormItem label="证件号">
              {getFieldDecorator('requestAddBaseDto.idCode', {
                validateTrigger: 'onChange',
                rules: [
                  {
                    required: true,
                    message: '请输入',
                  },
                ],
              })(<Input placeholder="请输入" onChange={this.getIdCode} />)}
            </FormItem>
          )}
        </Col>
        <div style={{ clear: 'both' }} />
        <Col {...colProps}>
          <FormItem label="性别">
            {getFieldDecorator('requestAddBaseDto.gender', {
              rules: [{ required: true, message: '请选择' }],
            })(<DictCode dictType="GENDER" />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          <FormItem label="国籍">
            {getFieldDecorator('requestAddBaseDto.nation', {
              rules: [{ required: true, message: '请选择' }],
            })(<DictCode dictType="NATIONALITY" />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          <FormItem label="出生日期">
            {getFieldDecorator('requestAddBaseDto.birthDate', {
              rules: [{ required: false, message: '请选择' }],
            })(<DatePicker placeholder="请选择" style={{ width: '100%' }} />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          <FormItem label="手机">
            {getFieldDecorator('requestAddBaseDto.mobile', {
              rules: [
                {
                  required: true,
                  message: '请输入11位手机号码',
                  pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                  max: 12,
                },
              ],
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...colProps}>
          <FormItem label="员工邮箱">
            {getFieldDecorator('requestAddBaseDto.email', {
              rules: [{ type: 'email', message: '应为邮箱格式', max: 50 }],
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
    );
  }
}

export default BasicInfo;
